<div class="content">
	<textarea id="pre">


		<!-- 子组件 -->
		<template>
	<view class="custom-navigation" :style="'height:'+CustomBar+'px;z-index:'+zIndex">
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed padding-left" :style="style">
				<view class="cu-left">
					<text @tap="BackPage" v-if="isBack" class="cuIcon-back back-icon"></text>
					<slot name="backText"></slot>
				</view>
				<view class="content-txt" :style="'top:'+StatusBar+'px;color:'+color+';'">
					<slot name="content"></slot>
				</view>
				<view class="padding-right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				let StatusBar = this.StatusBar;
				let CustomBar = this.CustomBar;
				let bgColor = this.bgColor;
				let color = this.color;
				let style = `color:${color};background-color:${bgColor};height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		props: {
			zIndex: {
				type: String,
				default: '9999'
			},
			color: {
				type: String,
				default: '#000'
			},
			bgColor: {
				type: String,
				default: ''
			},
			bgClass: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: false
			}
		},
		methods: {
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.custom-navigation{
		position: relative;
	}
	.cu-left {
		font-size: 18px;
		display: flex;
		align-items: center;
		.back-icon{
			margin-right: 10px;
			font-size: 20px;
		}
	}

	.content-txt {
		position: absolute;
		text-align: center;
		width: calc(100% - 170px);
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		height: 30px;
		font-size: 16px;
		line-height: 30px;
		cursor: none;
		/* pointer-events: none; */
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: visible;
	}
</style>

	<!-- App.vue  -->
	onLaunch(){
		this.getStatusBarInfo();
	},
	methods:{
		getStatusBarInfo() {
			uni.getSystemInfo({
				success: function(e) {
					// #ifndef MP
					Vue.prototype.StatusBar = e.statusBarHeight;
					if (e.platform == 'android') {
						Vue.prototype.CustomBar = e.statusBarHeight + 50;
					} else {
						Vue.prototype.CustomBar = e.statusBarHeight + 45;
					}
					// #endif

					// #ifdef MP-WEIXIN || MP-QQ
					Vue.prototype.StatusBar = e.statusBarHeight;
					let capsule = wx.getMenuButtonBoundingClientRect();
					if (capsule) {
						Vue.prototype.Custom = capsule;
						// Vue.prototype.capsuleSafe = uni.upx2px(750) - capsule.left + uni.upx2px(750) - capsule.right;
						Vue.prototype.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
					} else {
						Vue.prototype.CustomBar = e.statusBarHeight + 50;
					}
					// #endif

					// #ifdef MP-ALIPAY
					Vue.prototype.StatusBar = e.statusBarHeight;
					Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
					// #endif
				}
			});
		}
	}


	<!-- 父组件 -->
		<cu-custom :isBack="false" :color="barColor" :bgColor="'rgba(28, 196, 125,' + barop + ')'"><view slot="backText">个人中心</view></cu-custom>
	 data(){
	 	return{
	 		barColor: '#000',
			barop: 0,
			CustomBar: this.CustomBar,
			naviColor: '#000',	
	 	}
	 }
	 onPageScroll(e) {
		this.barop = this.changeOpa(e);
		this.changeBarColor(e);
	},
	 methods:{
	 	<!-- 改变字体颜色透明度 -->
	 	changeOpa(e) {
			var opaty = 0;
			let scrollTop = e.scrollTop
			if (scrollTop > 0) {
				if (scrollTop <= 45) {
					opaty = scrollTop / 50
				} else if (scrollTop > 40) {
					opaty = 1;
				}

			} else {
				opaty = 0;
			}
			return opaty;
		},
		<!-- 改变背景颜色 -->
	 	changeBarColor(e) {
			var opaty = 0;
			let scrollTop = e.scrollTop;
			if (scrollTop > 0) {
				if (scrollTop <= 45) {
					opaty = scrollTop / 50;
				} else if (scrollTop > 40) {
					opaty = 1;
				}
				this.barColor = 'rgba(255,255,255,' + opaty + ')';
			} else {
				this.barColor = '#000';
			}
		},
	 }
	</textarea>
</div>